<template>
	<section>
		<div>
			<p style="font-size: 5.0vw;color: red;">购买Vip后你将获得以下特权</p>
			<mu-container>
				<mu-expansion-panel>
					<div slot="header" style="font-size: 4.5vw;">特权一</div>
					<div style="border: 1px solid black;">
						<p style="font-size: 4.5vw;color: red;">1、显示学校的模拟分数！</p>
						<p style="font-size: 4.5vw;color: red;padding-bottom:10px;border-bottom: 1px solid rgb(0,0,0,0.1);">2、允许进入学校详情页！</p>
						<img src="../../static/images/详细分数.jpg" style="width: 100%;" />
					</div>
				</mu-expansion-panel>
				<mu-expansion-panel>
					<div slot="header" style="font-size: 4.5vw;">特权二</div>
					<div style="border: 1px solid black;">
						<p style="font-size: 4.5vw;color: red;padding-bottom:10px;border-bottom: 1px solid rgb(0,0,0,0.1);">能筛选出该学校符合您需求的专业！</p>
						<img src="../../static/images/选择专业.jpg" style="width: 100%;" />
					</div>
				</mu-expansion-panel>
				<mu-expansion-panel>
					<div slot="header" style="font-size: 4.5vw;">特权三</div>
					<div style="border: 1px solid black;">
						<p style="font-size: 4.5vw;color: red;padding-bottom:10px;border-bottom: 1px solid rgb(0,0,0,0.1);">可以查看学校历年录取分数！</p>
						<img src="../../static/images/历年分数.png" style="width: 100%;" />
					</div>
				</mu-expansion-panel>
			</mu-container>
		</div>
		<div style="position: relative;top: 20px;">
			<p style="font-size: 4vw;background-color: #E9E9E9;height: 50px;line-height: 50px;">请选择支付方式：</p>
			<mu-flex class="select-control-row">
				<div style="padding-left: 10%;width: 50%;">
					<mu-radio value="1" v-model="radiod" label="微信支付"></mu-radio>
				</div>
				<div style="padding-right: 10%;width: 50%;">
					<mu-radio value="2" v-model="radiod" label="卡密绑定"></mu-radio>
				</div>
			</mu-flex>
			<div>
				<section v-show="radiod==1" class="login-frame center-mid" style="margin-bottom: 15px;">
					购买VIp：0.01元人民币，别惊慌，在测试
				</section>
			</div>
			<section v-show="radiod==2" class="login-frame center-mid">
				<mu-text-field v-model="card" placeholder="请输入卡密" class="noborder-input"></mu-text-field>
			</section>
			<mu-button color="primary" @click="payForVip" style="margin-right: 15px;">{{payButton}}</mu-button>
			<mu-button color="primary" @click="back">返回</mu-button>
		</div>
	</section>
</template>

<script>
	//	var storage = window.localStorage;
	export default {
		data() {
			return {
				radiod: null,
				radios: [{
						id: 1,
						name: "微信支付"
					},
					{
						id: 2,
						name: "卡密绑定"
					}
				],
				card: "",
				payButton: "支付"
			}
		},
		methods: {
			payForVip() {
				if(this.radiod == 1) {
					window.location.href = "http://zte-gao.nat100.top/gaokao-api/pay/createVip?returnUrl=http://hetao.nat100.top/wechat/pay/pay.html&token=" + localStorage.token + "&level=1"
				} else {
					let that = this
					let c = {
						card: this.card
					}
					that.axios.post('gaokao-api/api/setVip', c).then(function(response) {
						console.log(response)
						if(response.data.code == 0) {
							//						that.$toast.success(response.data.msg);
							setTimeout(function() {
								window.location.href = "http://zte-gao.nat100.top/gaokao-api/wechat/authorize?returnUrl=http://zte-gao.nat100.top"
							}, 1480)
						} else {
							//that.$toast.error(response.data.msg);
						}
					}).catch(function(error) {
						console.log(error)
					})
				}
			},
			back() {
				this.$router.go(-1)
			},
		},
		watch: {
			radiod: {
				handler(newVal) {
					if(newVal == 1)
						this.payButton = "支付"
					else
						this.payButton = "绑定"
				}
			},
		}
	}
</script>

<style scoped="scoped">
	.select-control-row {
		padding: 8px 0;
	}
	
	.select-control-group {
		margin: 16px 0;
	}
</style>